<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>Yo Demo List</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../yo.png" />
<link rel="apple-touch-startup-image" href="../startup.png" />
<link rel="shortcut icon" href="../shortcut.png" />
<link rel="stylesheet" href="../usage/export/index.css" />
</head>
<body>
<div class="yo-flex">
    <header class="yo-header m-header">
        <h2 class="title">Yo Demo List</h2>
        <a href="../doc/index.html" class="affirm">文档</a>
    </header>
    <div class="flex">

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Webfont:</h2>
                <a href="webfont/yo-ico.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">Yo内置字体图标</div>
                    <span class="yo-badge yo-badge-normal">24</span>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">Yo默认提供的字体图标，可从Iconfont平台扩展</div>
        </section>

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Layout:</h2>
                <a href="layout/yo-flex.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">纵向弹性布局示例1（yo-flex）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="layout/yo-flex2.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">纵向弹性布局示例2（yo-flex）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="layout/yo-align.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">水平垂直对齐布局示例（yo-align）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">布局演示，基本覆盖多数场景</div>
        </section>

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Element:</h2>
                <a href="element/yo-badge.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">消息气泡（yo-badge）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-btn.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">按钮（yo-btn）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-checked.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">单选和多选（yo-checked）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-input.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">输入框（yo-input）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-loading.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">加载中...（yo-loading）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-loadtip.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">加载提示（yo-loadtip）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-range.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">区间（yo-range）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="element/yo-score.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">星级（yo-score）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">独立的单一元件</div>
        </section>

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Fragment:</h2>
                <a href="fragment/yo-actionsheet.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">活动清单（yo-actionsheet）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-header.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">头部（yo-header）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-card.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">卡片（yo-card）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-list.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">列表（yo-list）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-table.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">表格（yo-table）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-breadcrumb.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">面包屑（yo-breadcrumb）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-proportion.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">比例（yo-proportion）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-search.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">搜索框（yo-search）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-toolbar.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">工具条（yo-toolbar）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="fragment/yo-vcode.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">验证码输入（yo-vcode）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">公用代码片段</div>
        </section>

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Widget:</h2>
                <a href="widget/yo-dialog.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">对话框（yo-dialog）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-number.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">数字选择（yo-number）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-select.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">选择（yo-select）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-tab.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">选项卡（yo-tab）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-tip.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">提示（yo-tip）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-mask.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">遮罩（yo-mask）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-index.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">索引（yo-index）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-group.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">组（yo-group）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-suggest.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">搜索建议（yo-suggest）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-switchable.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">轮播图（yo-switchable）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-switch.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">开关（yo-switch）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-slidermenu.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">侧滑菜单（yo-slidermenu）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-rating.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">打分（yo-rating）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-doublelist.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">双列表（yo-doublelist）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="widget/yo-datepicker.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">日历（yo-datepicker）</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">组件化的公用代码片段</div>
        </section>

        <section class="m-list">
            <div class="yo-list yo-list-group">
                <h2 class="label">Animate:</h2>
                <a href="animate/ani-text.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">Text Animate</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
                <a href="animate/ani-page.html" class="item item-active">
                    <i class="yo-ico">&#xf078;</i>
                    <div class="flex">Page Switch Animate</div>
                    <i class="yo-ico more">&#xf07f;</i>
                </a>
            </div>
            <div class="note">动画演示，Yo内置了60+的动画特效可供选择</div>
        </section>

    </div>
</div>
</body>
</html>
